import React from 'react';
import { Input } from 'antd';
import { useTranslation } from 'react-i18next';

interface SendLinkProps {
	onChangeSendLink?: (e: any) => void;
	errorMessage?: string;
}

const SendLink = (props: SendLinkProps) => {
	const { t } = useTranslation();
	const { onChangeSendLink, errorMessage } = props;
	return (
		<div className="send-link-container">
			<Input placeholder={t('input-link-to-client') as string} className="send-link-input" maxLength={200} bordered={false} onChange={e => onChangeSendLink && onChangeSendLink(e)} />
			{errorMessage ? <p className="error-message">{errorMessage}</p> : undefined}
			<div className="example-box">
				<p className="example-text">{t('demo-url')}：</p>
				<p className="link-box">
					<span>https://www.xxxxxx.com</span>
					<span>https://www.xxxxxx.cn</span>
				</p>
			</div>
		</div>
	);
};

export default SendLink;
